<!-- table组件-->
<template>
  <div style="width:100%;overflow-x:auto">
    <el-table
      :data="newTableData"
      border
      stripe
      style="width: 100%"
      class="table-summary"
      @selection-change="selection"
    >
      <el-table-column
        v-if="hasSera"
        type="index"
        label="序号"
        width="50"
        align="center"
        :index="indexFun"
      ></el-table-column>
      <el-table-column
        :selectable="selectable"
        v-if="!tableReadonly && showSelect"
        type="selection"
        align="center"
        width="55"
      ></el-table-column>
      <template v-for="({label,prop,btns,fn,},idx) in newTableInfos">
        <template v-if="prop != 'changeBtn'">
          <el-table-column
            :prop="prop"
            :key="idx"
            :label="label"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <template v-if="!scope.$index && showSummary">{{totalRows(prop,scope.row)}}</template>
              <template
                v-else-if="prop == 'updateTime' || prop == 'operateTime' || prop == 'createDate' || prop == 'createTime'"
              >{{scope.row[prop] | getTimeString}}</template>
              <!-- 表格内按钮（除去操作） -->
              <template v-else-if="prop == 'btn'">
                <el-button
                  v-for="(btnItem,btnIdx) in btns"
                  :key="btnIdx"
                  type="text"
                  :disabled="btnItem.disabled"
                  @click="btnItem.fn(btnItem.type,scope.$index)"
                >{{btnItem.label}}</el-button>
              </template>
             
              <template
                v-else
              >{{tableFormatter?tableFormatter(prop,scope.row[prop],scope.row):scope.row[prop]}}</template>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column
            :prop="prop"
            :key="idx"
            :label="label"
            align="center"
            :width="(tableChangeBtns.length-1)*60"
            fixed="right"
          >
            <template slot-scope="scope" v-if="idx">
              <el-button
                v-show="scope.$index && showSummary || !showSummary"
                v-for="(btnItem,btnIdx) in activeBtn?activeBtn(scope.row,tableChangeBtns):tableChangeBtns"
                :key="btnIdx"
                type="text"
                :disabled="btnItem.disabled"
                @click="btnItem.fn(btnItem.type,scope.$index,scope.row)"
              >{{btnItem.label}}</el-button>
              <span v-show="!scope.$index && showSummary">——</span>
              <!-- 操作方法返回类型和index -->
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import utils from "@/common/utils";
export default {
  data() {
    return {
      newTableInfos: [],
      newTableData: []
    };
  },
  methods: {
    totalRows(prop,row) {
      if (!this.summaryMethod()[prop] && this.summaryMethod()[prop] !== 0) {
        return "——";
      }
      return (
        (this.tableFormatter
          ? this.tableFormatter(prop, this.summaryMethod()[prop],row)
          : this.summaryMethod()[prop]) || "——"
      );
    },
    defaultFormatter(row, column, cellValue, index) {
      return cellValue;
    },
    selection(sele) {
      this.$emit("selectChange", sele);
    },
    indexFun(index) {
      if (this.showSummary) {
        if (!index) {
          return !index ? "合计" : index;
        }
      } else {
        return index + 1;
      }

      return !index && this.showSummary ? "合计" : index;
    },
    summaruFormatter(row, column, cellValue, index) {
      console.log(cellValue);
    }
  },
  created() {
    //如果是只读，去掉表头操作按钮一栏
    this.newTableInfos = this.tableInfos;
    if (!this.tableReadonly) return;
    this.newTableInfos = this.tableInfos.filter((item, idx) => {
      return item.prop != "changeBtn";
    });
  },
  mounted() {
    this.newTableData = this.showSummary
      ? [{}, ...this.tableData]
      : this.tableData;
  },
  props: [
    "tableData", //table数据
    "tableInfos", //表格信息{label:'',prop:''}
    "tableChangeBtns", //操作按钮
    "tableFormatter", //格式化数据方法
    "selectable", //多选禁用
    "showSelect", //是否多选
    "hasSera", //是否含有合计
    "activeBtn", //操作按钮显示规则
    "tableReadonly", //只读 不显示操作按钮,无操作按钮不影响
    "showSummary", //显示合计
    "summaryMethod" //合计显示方法
  ],
  destroyed() {},
  filters: {
    getTimeString(time) {
      return utils.getTimeString(time);
    }
  },
  watch: {
    tableData(val) {
      this.newTableData = this.showSummary
        ? [{}, ...this.tableData]
        : this.tableData;
    }
  }
};
</script>

<style lang="stylus">
summaryHeight = 48px;

.table-sumary {
  .el-table__footer-wrapper {
    position: absolute;
    top: summaryHeight;

    td {
      background: #fff;
    }
  }

  .el-table__body-wrapper {
    position: relative;
    top: summaryHeight;
    margin-bottom: summaryHeight;
  }

  .el-table__fixed-right {
    padding-top: summaryHeight;

    .el-table__body {
      padding-top: summaryHeight;
    }
  }
}
</style>
